<script setup lang="ts">
import LessonItem from "@/components/lesson/lesson-item/index.vue";
import type {API} from "@/type/type";
import {cancelLessonAPI, getMyLessonAPI, signInLessonAPI} from "@/api/lesson";
import {ref} from 'vue'
import {showConfirmDialog, showFailToast, showSuccessToast} from 'vant';
import {useRouter, useRoute} from "vue-router";

const props = withDefaults(defineProps<{
  backPath: string
}>(), {
  backPath: "/home"
})

const loading = ref<boolean>(false);
const finished = ref(false);
const lessons = ref<API.ILesson[]>([])
const pageSize = ref(3)
const current = ref(1)
const showSignInDialog = ref(false)
const password = ref(''); // 签到密码
const currentLesson = ref<API.ILesson | null>(null);
const router = useRouter()
const route = useRoute()

const fetchLessons = async (reset = false) => {
  if (reset) {
    lessons.value = []
    current.value = 1
    finished.value = false
  }
  if (finished.value) {
    return
  }
  loading.value = true
  // 获取课程列表
  const {data} = await getMyLessonAPI(current.value, pageSize.value)

  if (!data || !data.data || data.data.length === 0) {
    loading.value = false
    finished.value = true
    return
  }
  if (reset) {
    lessons.value = data.data
  } else {
    lessons.value = [...lessons.value, ...data.data]
  }
  // 根据返回数据量判断是否加载完成
  if (data.data.length < pageSize.value) {
    finished.value = true;
  } else {
    current.value++;
  }
  loading.value = false
}

const onLoad = async () => {
  await fetchLessons()
};

const handleLessonCancel = async (lesson: API.ILesson) => {
  showConfirmDialog({
    title: '取消预约',
    message: '确认取消预约课程吗',
  }).then(async () => {
    const {data} = await cancelLessonAPI(lesson.id)
    if (data) {
      showSuccessToast('取消成功')
      // 刷新
      lessons.value = lessons.value.filter(item => item.id !== lesson.id)
    }
  });
}
const handleLessonSignIn = async (lesson: API.ILesson) => {
  showSignInDialog.value = true
  currentLesson.value = lesson
}

const lessonSignIn = async () => {
  if (!password.value) {
    return showFailToast('请输入6位数签到密码')
  }
  if (!currentLesson.value) {
    return showFailToast('请选择课程')
  }
  const {data} = await signInLessonAPI(currentLesson.value.id, password.value)
  if (data) {
    showSuccessToast('签到成功')
    await fetchLessons(true)
  }
}

const back = () => {
  const backPathName = route.query?.backPathName || 'Home'
  router.push({name: backPathName} as any)
}
</script>

<template>
  <van-nav-bar title="我的预约" left-text="返回" left-arrow @click-left="back"/>
  <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      style="background: rgba(255,255,255,0);"
  >
    <LessonItem
        v-for="lesson in lessons"
        :key="lesson.id"
        :lesson="lesson"
        @lessonCancel="handleLessonCancel"
        @lessonSignIn="handleLessonSignIn"
    />
  </van-list>

  <van-dialog
      v-model:show="showSignInDialog"
      title="请输入6位数签到密码"
      @cancel="password = ''"
      @close="password = ''"
      show-cancel-button
      @confirm="lessonSignIn">
    <div style="padding: 20px 10px;">
      <van-field v-model="password" placeholder="请输入6位数签到密码，eg：123456"/>
    </div>
  </van-dialog>
</template>

<style scoped>

</style>
